<template>
  <!-- 项目管理：新增/编辑 -->
  <el-form ref="projectForm" :class="device=='mobile'?'mobileProjectForm':'projectForm'"
           :rules="rules" :inline="device=='mobile'?false:true" :model="projectForm" label-width="100px">
    <el-form-item label="项目名称" prop="projectName">
      <el-input maxlength="200" v-model="projectForm.projectName" placeholder="请输入项目名称"></el-input>
    </el-form-item>
    <el-form-item label="项目负责人" prop="projectLeader">
      <el-input maxlength="50" v-model="projectForm.projectLeader" placeholder="请输入项目负责人"></el-input>
    </el-form-item>
    <el-form-item label="项目类型" prop="projectType">
      <el-select v-model="projectForm.projectType" placeholder="请选择项目类型">
        <el-option value="">--请选择--</el-option>
        <el-option v-for="(vo, index) in projectTypeList" :key="index" :value="vo.value" :label="vo.name"></el-option>
      </el-select>
    </el-form-item><br />
    <el-form-item label="项目描述" prop="projectDesc">
      <el-input maxlength="200" type="textarea" rows="4" v-model="projectForm.projectDesc" resize="none" placeholder="请输入项目描述" show-word-limit/>
    </el-form-item>
    <el-form-item class="headingFormItem" label="excel表头" prop="heading" :rules="{required:projectForm.projectType==2?true:false, message:'请填写表头信息', trigger:'change'}" v-show="projectForm.projectType==2">
      <el-button type="primary" size="small" @click="addHeading">新增</el-button>
      <el-table :data="headingList" max-height="280px" style="width:100%;">
        <el-table-column label="表头名称" align="center" prop="name" min-width="140" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column label="表头宽度" align="center" prop="width" min-width="80" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.width" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column label="参数名称" align="center" prop="width" min-width="80" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-input v-model="scope.row.param" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="85">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHeading(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item label="备注" prop="remark">
      <el-input maxlength="200" type="textarea" rows="4" v-model="projectForm.remark" resize="none" placeholder="请输入备注" show-word-limit/>
    </el-form-item>
  </el-form>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { Loading } from 'element-ui';
  import { saveProject, detailProject } from "@/api/project/project";
  export default {
    name: 'ProjectAdd',
    data(){
      let checkHeading = (rule, value, callback)=>{
        console.log("value", value)
        if(this.projectForm.projectType == 2){
          if(!this.headingList.length){
            return callback(new Error("请填写表头信息"));
          }else{
            return callback();
          }
        }else{
          return callback();
        }
      }
      return {
        projectId:"",
        projectTypeList:[{value:1, name:"word"},{value:2, name:"excel"}],
        headingList:[],
        contentInfoList:[],
        projectForm:{
          projectName:"",
          projectLeader:"",
          projectType:"",
          projectDesc:"",
          remark:"",
          heading:""
        },
        rules: {
          projectName: [{required: true, message: '请输入项目名称', trigger: 'blur'}],
          projectLeader: [{required: true, message: '请输入项目负责人', trigger: 'blur'}],
          projectDesc: [{required: true, message: '请输入项目描述', trigger: 'blur'}],
          projectType: [{required: true, message: '请输入项目类型', trigger: 'change'}],
          // heading:[{type:String, validator:checkDetailName, trigger:'blur'}]
        },
      }
    },
    computed: {
      ...mapGetters([
        'device'
      ])
    },
    methods:{
      // 获取详情
      getDetail(projectId){
        this.projectId = projectId;
        detailProject(projectId).then(ret=>{
          if(ret.code == 200){
            this.projectForm = {
              projectName:ret.data.projectName,
              projectLeader:ret.data.projectLeader,
              projectDesc:ret.data.projectDesc,
              projectType:ret.data.projectType,
              remark:ret.data.remark,
              heading:ret.data.heading?ret.data.heading:""
            };
            if(ret.data.projectType == 2){
              this.headingList = JSON.parse(ret.data.heading);
            }
          }else{
            this.$message.error(ret.msg);
          }
        })
        .catch(err=>{
          console.log(err);
        })
      },

      // 添加表头
      addHeading(){
        this.headingList.push({
          name:"",
          width:60,
          param:""
        })
      },

      // 删除
      deleteHeading(index){
        this.$confirm('是否确认删除该信息?', {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(()=>{
          this.headingList.splice(index, 1);
        }).catch(() => {})
      },

      // 保存信息
      saveInfo(){
        this.$refs.projectForm.validate((valid) => {
          if(valid){
            if(this.projectForm.projectType == 2){
              if(!this.headingList.length){
                this.$message.warning("您还未填写表头信息");
                return false;
              }else{
                let num = 0;
                this.headingList.map((vo, index)=>{
                  if(!vo.name || !vo.width || !vo.param){
                    num++;
                  }
                })
                if(num){
                  this.$message.warning("您还有未填写的表头信息");
                  return false;
                }
              }
            }
            
            let loadingInstance = Loading.service({ fullscreen: true, background:"rgba(0,0,0,0.5)" });
            let params = this.projectForm;
            if(this.projectId) params.projectId = this.projectId;
            if(this.headingList.length) params.heading = JSON.stringify(this.headingList);
            console.log("params", params);

            saveProject(params).then(ret=>{
              loadingInstance.close();
              if(ret.code == 200){
                this.$message.success("保存成功！");
                this.$refs.projectForm.resetFields();
                this.headingList = [];
                if(this.projectId){
                  this.$emit("closeEditPage");
                }else{
                  this.$emit("closeAddPage");
                }
                setTimeout(() => {
                  this.$emit('getProjectList');
                }, 10);
              }else{
                this.$message.error(ret.msg);
              }
            }).catch(err=>{
              console.log(err);
              loadingInstance.close();
            })
          }else{
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>
  .el-form{
    background-color:#FFF;
    padding:10px 0px;
    margin-bottom: 10px;
    text-align:left;
  }
  .el-form-item{text-align:left;}
  .el-input{width:215px;}
  .headingFormItem{
    width:681px;
  }
  .headingFormItem >>> .el-form-item__content{
    width:calc(100% - 100px);
  }
  .headingFormItem >>> .el-table .el-input{
    width:100%;
  }
  .projectForm >>> .el-textarea__inner{
    width:561px;
  }
  .mobileProjectForm >>> .el-textarea__inner{
    width:100%;
  }
  .mobileProjectForm >>> .el-table{
    width:100%;
  }
  .mobileProjectForm .headingFormItem{
    width:100%;
  }
</style>
